<template>
    <div class="wrapContent">
        <div class="setHeight">
            <el-table
                    ref="table"
                    width="100%"
                    height="530px"
                    :data="partMaterialList"
                    highlight-current-row
                    :row-style="{height: '0'}"
                    :cell-style="{padding: '1px'}" border style="width: 100%;font-size: 13px;"
                    v-bind:style="{ height: partMaterialList.length?'530px' : '530px'}"
                    border size="small"
                    @selection-change="handleSelectionChange">
                <el-table-column
                        type="selection"
                        width="55">
                </el-table-column>
                <el-table-column
                        prop="number"
                        :label="$t('message.materialLibraryManager.number')"
                        align="center"
                        width="100"
                >
                </el-table-column>
                <el-table-column
                        prop="name"
                        :label="$t('message.materialLibraryManager.name')"
                        align="center"
                        width="150"
                >
                </el-table-column>
                <el-table-column
                        prop=level
                        sortable
                        :label="$t('message.materialLibraryManager.level')"
                        align="center"
                        width="180"
                >
                </el-table-column>
                <el-table-column
                        prop="area"
                        sortable
                        :label="$t('message.materialLibraryManager.area')"
                        align="center"
                        width="180"
                >
                </el-table-column>
                <el-table-column
                        prop="density"
                        sortable
                        :label="$t('message.materialLibraryManager.density')"
                        align="center"
                        width="180"
                >
                </el-table-column>
                <el-table-column
                        prop="standard"
                        sortable
                        :label="$t('message.materialLibraryManager.standard')"
                        align="center"
                        width="180"
                >
                </el-table-column>
            </el-table>
            <div class="button-style mt-2">
                <el-button type="primary" size="small" :disabled="addDisabled" @click="addMaterialItems()">
                    {{ $t('message.materialSetting.add') }}
                </el-button>
                <el-button type="primary" size="small" :disabled="!deleteDisabled" @click="deleteMaterialItems()">
                    {{ $t('message.materialSetting.delete') }}
                </el-button>
                <slot name="cancelButton"></slot>
            </div>
            <material-setting-dialog :docId="currentPartDocInfo.protoRefDocId" :dialogVisible="dialogVisible"
                                     @close-dialog="closeDialog"
                                     @confirm-dialog="confirmDialog"></material-setting-dialog>
        </div>
    </div>
</template>

<script>
import {materialSettingCommand} from "../../../../command/MaterialSettingCommand";
import MaterialSettingDialog from "./MaterialSettingDialog.vue";
import dialogMixin from "../../DialogMixin";

export default {
    name: "PartDocMaterialInfo",
    mixins: [dialogMixin],
    components: {MaterialSettingDialog},
    props: {
        partMaterialData: {
            type: Array,
            default: [],
        },
        currentPartDocInfo: {
            type: Object,
            default: {}
        },
        addDisabled: {
            type:Boolean,
            default:false,
        }
    },
    data() {
        return {
            isInit: false,
            dialogVisible: false,
            partMaterialList: [],
            selectedRowData: [],//从当前零件已经添加的材料项选择数据
            selectedAddItems: [],//选择的需要添加的材料项
        }
    },
    mounted() {
    },
    methods: {
        //复选框选择项
        handleSelectionChange(val) {
            this.selectedRowData = [];
            this.selectedRowData = val;
        },
        addMaterialItems() {
            this.dialogVisible = true;
        },
        closeDialog(val) {
            this.dialogVisible = val;
        },
        confirmDialog(val) {
            this.selectedAddItems = [];
            this.selectedAddItems = val;
            if (!this.selectedAddItems.length) {
                materialSettingCommand.eventBusAlertMsg('当前没有需要添加的材料项', 'warning')
            } else {
                let numbers = this.selectedAddItems.map(item => item.number);
                let info = {
                    partDocId: this.currentPartDocInfo.protoRefDocId,
                    partDocName: this.currentPartDocInfo.protoRefName,
                    materialNumbers: numbers
                }
                materialSettingCommand.addMaterialItemToCurrentPart(info, res => {
                    this.partMaterialList = res;
                    materialSettingCommand.eventBusAlertMsg('新增材料成功', 'success')
                    this.dialogVisible = false;
                });
            }
        },
        deleteMaterialItems() {
            let selectedRowData = this.selectedRowData;
            let numbers = selectedRowData.map(item => item.number);
            let info = {
                partDocId: this.currentPartDocInfo.protoRefDocId,
                materialNumbers: numbers
            }
            materialSettingCommand.deleteMaterialItemToCurrentPart(info, res => {
                this.partMaterialList = res;
                materialSettingCommand.eventBusAlertMsg('材料删除成功', 'success')
            })
        },
    },
    computed: {
        deleteDisabled() {
            return !!this.partMaterialList.length && !!this.selectedRowData.length;
        },
    },
    watch: {
        partMaterialData: {
            // immediate:true,
            handler(newVal) {
                this.partMaterialList = newVal;
            }
        },
    }

}
</script>

<style scoped>

.wrapContent {
    font-size: 12px;
}

.button-style {
    display: flex;
    justify-content: flex-end;
    margin-top: 5px;
}

</style>